---
permalink: /index.html
layout: home
---

<div class="sidebar-menu toggle-others fixed">
    <div class="sidebar-menu-inner">
        <header class="logo-env">
            <!-- logo -->
            <div class="logo">
                <a href="index.html" class="logo-expanded">
                    <img src="../assets/images/logo@2x.png" width="100%" alt="" />
                </a>
                <a href="index.html" class="logo-collapsed">
                    <img src="../assets/images/logo-collapsed@2x.png" width="40" alt="" />
                </a>
            </div>
            <div class="mobile-menu-toggle visible-xs">
                <!--<a href="#" data-toggle="user-info-menu">
                    <i class="linecons-cog"></i>
                </a>-->
                <a href="#" data-toggle="mobile-menu">
                    <i class="fa-bars"></i>
                </a>
            </div>
        </header>
        <ul id="main-menu" class="main-menu">
            {% for category in site.data.webstack %}
            <li>
                {% if category.sub %}
                <a>
                    <i class="{{ category.icon }}"></i>
                    <span class="title">{{ category.name }}</span>
                </a>
                <ul>
                    {% for sub_category in category.sub %}
                    <li>
                        <a href="#{{ sub_category.name }}" class="smooth">
                            <span class="title">{{ sub_category.name }}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% else if %}
                <a href="#{{ category.name }}" class="smooth">
                    <i class="{{ category.icon }}"></i>
                    <span class="title">{{ category.name }}</span>
                </a>
                {% endif %}
            </li>
            {% endfor %}
            <li>
                <a href="https://raoyi.net/">
                    <span class="tooltip-blue"><b>RAOYI.NET</b></span>
                </a>
            </li>
            <br >
            <br >
        </ul>
    </div>
</div>

<div class="main-content">
    <nav class="navbar user-info-navbar" role="navigation">
        <!-- User Info, Notifications and Menu Bar -->
        <!-- Left links for user info navbar -->
        <ul class="user-info-menu left-links list-inline list-unstyled">
            <li class="hidden-sm hidden-xs">
                <a href="#" data-toggle="sidebar">
                    <i class="fa-bars"></i>
                </a>
            </li>
        </ul>
    </nav>

    {% for category in site.data.webstack %}
        {% if category.sub %}
            {% for sub_category in category.sub %}
            <h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="{{ sub_category.name }}"></i>{{ sub_category.name }}</h4>
            <div class="row">
                {% for link in sub_category.links %}
                <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('{{ link.url }}', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="{{ link.url }}">
                        <div class="xe-comment-entry">
                            <!--<a class="xe-user-img">
                                <img src="{{ link.logo }}" class="img-circle" width="40">
                            </a>-->
                            <div class="xe-comment">
                                <a href="#" class="xe-user-name overflowClip_1">
                                    <strong>{{ link.title }}</strong>
                                </a>
                                <p class="overflowClip_2">{{ link.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <br />
            {% endfor %}
        {% else if %}
        <h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="{{ category.name }}"></i>{{ category.name }}</h4>
        <div class="row">
            {% for link in category.links %}
            <div class="col-sm-3">
                <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('{{ link.url }}', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="{{ link.url }}">
                    <div class="xe-comment-entry">
                        <!--<a class="xe-user-img">
                            <img src="{{ link.logo }}" class="img-circle" width="40">
                        </a>-->
                        <div class="xe-comment">
                            <a href="#" class="xe-user-name overflowClip_1">
                                <strong>{{ link.title }}</strong>
                            </a>
                            <p class="overflowClip_2">{{ link.description }}</p>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <br />
        {% endif %}
    {% endfor %}    
    
    <!-- Main Footer -->
    <!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
    <!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
    <!-- Or class "fixed" to  always fix the footer to the end of page -->
    <footer class="main-footer sticky footer-type-1">
        <div class="footer-inner">
            <!-- Add your copyright text here -->
            <div class="footer-text">
                <strong>WebStack</strong> @ <a href="http://raoyi.net" target="_blank"><strong>RaoYi.net</strong></a>
                <!--  - Purchase for only <strong>23$</strong> -->
            </div>
            <!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
            <div class="go-up">
                <a href="#" rel="go-top">
                    <i class="fa-angle-up"></i>
                </a>
            </div>
        </div>
    </footer>
</div>

<!-- 锚点平滑移动 -->
<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '.has-sub', function(){
            var _this = $(this)
            if(!$(this).hasClass('expanded')) {
               setTimeout(function(){
                    _this.find('ul').attr("style","")
               }, 300);
              
            } else {
                $('.has-sub ul').each(function(id,ele){
                    var _that = $(this)
                    if(_this.find('ul')[0] != ele) {
                        setTimeout(function(){
                            _that.attr("style","")
                        }, 300);
                    }
                })
            }
        })
        $('.user-info-menu .hidden-sm').click(function(){
            if($('.sidebar-menu').hasClass('collapsed')) {
                $('.has-sub.expanded > ul').attr("style","")
            } else {
                $('.has-sub.expanded > ul').show()
            }
        })
        $("#main-menu li ul li").click(function() {
            $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
            $(this).addClass('active'); // 添加当前元素的样式
        });
        $("a.smooth").click(function(ev) {
            ev.preventDefault();

            public_vars.$mainMenu.add(public_vars.$sidebarProfile).toggleClass('mobile-is-visible');
            ps_destroy();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top - 30
            }, {
                duration: 500,
                easing: "swing"
            });
        });
        return false;
    });

    var href = "";
    var pos = 0;
    $("a.smooth").click(function(e) {
        $("#main-menu li").each(function() {
            $(this).removeClass("active");
        });
        $(this).parent("li").addClass("active");
        e.preventDefault();
        href = $(this).attr("href");
        pos = $(href).position().top - 30;
    });
</script>
